<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <title>填写订单信息</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon/favicon.ico" />
    <link rel="stylesheet" href="/css/cart.css">
    <link rel="stylesheet" href="/css/footer1.css">
    <link rel="stylesheet" href="/css/shop.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jq_3.3.1_mi.js"></script>
    <script src="/layui/layui.all.js"></script>
    <script src="/js/close.js"></script>
    <script src="/mylayer.js"></script>
</head>
<body>
    <!-- 购物车头部 -->
    <div class="header">
        <div class="content">
            <div class="content-left">
                <a href="" class="logo"></a>
                <h1 class="title">确认订单</h1>
            </div>
            <div class="content-right">
                <div class="userinfo">
                    <div class="username">
                        <a href="javascript:void(0)" class="toUserInfo">我是whoop</a>
                        <ul>
                            <li class="infoitem">个人中心</li>
                            <li class="infoitem">评价晒单</li>
                            <li class="infoitem">我的喜欢</li>
                            <li class="infoitem">小米账户</li>
                            <li class="infoitem">退出登录</li>
                        </ul>
                    </div>
                    <i class="fa fa-angle-down fa-1x"></i>
                </div>
                <div class="toOrderDetail"><a href="/page/order/list">我的订单</a></div>
            </div>
        </div>
    </div>
    <!-- 主体内容 -->
    <div class="close_content">
        <div class="close_contenter">
            <h1>收货地址</h1>
            <div id="shippingList">
<!--                <div class="close_add">-->
<!--                 <h1>xxx</h1>-->
<!--                 <h6>177****2345</h6>-->
<!--                 <h6>河北 xx市 xx区 xx街道</h6>-->
<!--                 <h6>xx栋 1405室</h6>-->
<!--                    <span class="del">删除</span>-->
<!--                </div>-->
                <div class="close_add1">
                 <i class="fa fa-plus-square"></i>
                 <h6>添加新地址</h6>
                </div>
                <div class="clear"></div>
            </div>
            <h2>配送方式 <span style="color: #FF6A00;font-size: 13px;margin-left: 80px;">包邮</span></h2>
            <div class="close_data">
            <h3>付款方式</h3>
                <h5 id="0" style="border-color:rgb(255,106,0)">0：货到付款</h5>
                <h5 id="1">1：微信</h5>
                <h5 id="2">2：支付宝</h5>
                <h5 id="3">3：银联</h5>
            </div>
            <h2 style="border: none;margin-top:0px; ">发票<span style="color: #FF6A00;font-size: 13px;margin-left: 125px;">电子发票&nbsp;&nbsp;  个人  &nbsp;&nbsp;商品明细&nbsp;&nbsp;  修改 ></span></h2>
            <h4>商品及优惠券 <a href="/page/cart/list">返回购物车&nbsp; <i class="fa fa-chevron-right"></i> </a></h4>
            <div id="cartList" class="close_shop">
<!--                <p>-->
<!--                    <img src="/static/img/pms (2).jpg"><a href="/detail.html">红米6A 全网通版 2GB内存 16GB 流沙金  </a>599元 x 1-->
<!--                    <span >599元</span>-->
<!--                </p>-->
                <div class="clear"></div>
            </div>
            <div class="close_much">
                <div class="close_much_left">
                  <p><i class="fa fa-plus-square"></i>使用优惠券</p>
                  <p><i class="fa fa-plus-square"></i>使用小米礼品卡</p>
                </div>
                <div class="close_much_right">
                   <p>商品件数  :<span>3件</span></p> 
                   <p>商品总价  :<span>4999元</span></p> 
                   <p>优惠活动  :<span>-0元</span></p> 
                   <p>优惠券抵扣  :<span>-0元</span></p> 
                   <p>运费  :<span>0元</span></p> 
                   <p style="height: 50px;line-height:50px; ">应付总额  :<span class="zong">4999 <b> 元</b></span></p>                  
                </div>
                <div class="clear"></div>
            </div> 
        </div>
        <div class="close_clear">
              <button class="submit-cart">立即下单</button>
        </div>
    </div>

    <!--   网页底部   -->
    <div class="footer-top">
        <div class="footer-top_li">
            <div class="footer-top_li_1">
                <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
                <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span>
                <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
                <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
                <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
            </div>
            <span class="separate"></span>
            <div class="footer-top_li_2">
                <div class="footer-top_li_a">
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="">账户管理</a></dd>
                        <dd><a href="">购物指南</a></dd>
                        <dd><a href="">订单操作</a></dd>
                    </dl>
                    <dl>
                        <dt>服务支持</dt>
                        <dd><a href="">售后政策</a></dd>
                        <dd><a href="">自助服务</a></dd>
                        <dd><a href="">相关下载</a></dd>
                    </dl>
                    <dl>
                        <dt>线下门店</dt>
                        <dd><a href="">小米之家</a></dd>
                        <dd><a href="">服务网点</a></dd>
                        <dd><a href="">授权体验店</a></dd>
                    </dl>
                    <dl>
                        <dt>关于小米</dt>
                        <dd><a href="">了解小米</a></dd>
                        <dd><a href="">加入小米</a></dd>
                        <dd><a href="">投资者关系</a></dd>
                    </dl>
                    <dl>
                        <dt>关注我们</dt>
                        <dd><a href="">新浪微博</a></dd>
                        <dd><a href="">官网微博</a></dd>
                        <dd><a href="">联系我们</a></dd>
                    </dl>
                    <dl>
                        <dt>特色服务</dt>
                        <dd><a href="">F码通道</a></dd>
                        <dd><a href="">礼物码</a></dd>
                        <dd><a href="">防伪查询</a></dd>
                    </dl>
                    <div class="connect">
                        <p class="telephone">Feir-520-1314</p>
                        <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>
                        <button><span class="fa fa-commenting "></span> 联系客服</button>
                    </div>
                </div>
                <div class="footer-top_li_b"></div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="footer-bottom_li">
            <div class="footer-bottom_li_1">
                <img src="/static/img/footlogo.png" alt="" class="logoBottom">
            </div>
            <div class="footer-bottom_li_2">
                <div class="footer-bottom_li_a">
                    <ul>
                        <li>小米商城<span></span></li>
                        <li>MIUI<span></span></li>
                        <li>米家<span></span></li>
                        <li>米聊<span></span></li>
                        <li>多看<span></span></li>
                        <li>游戏<span></span></li>
                        <li>路由器<span></span></li>
                        <li>米粉卡<span></span></li>
                        <li>政企服务<span></span></li>
                        <li>小米天猫店<span></span></li>
                        <li>隐私政策<span></span></li>
                        <li>问题反馈<span></span></li>
                        <li>Select Region</li>
                    </ul>
                </div>
                <div class="footer-bottom_li_b">
                    <a href="">©mi.com</a>
                    京ICP证110507号
                    <a href="">京ICP备10046444号</a>
                    <a href="">京公网安备11010802020134号</a>
                    <a href="">京网文[2014]0059-0009号</a>
                    <br>
                    违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </div>
            </div>
            <div class="footer-bottom_li_3">
                <img src="/static/img/footericon1.png" alt="" class="icon">
                <img src="/static/img/footericon2.png" alt="" class="icon">
                <img src="/static/img/footericon3.png" alt="" class="icon">
                <img src="/static/img/footericon4.png" alt="" class="icon">
                <img src="/static/img/footericon5.png" alt="" class="icon">
            </div>
            <div class="footer-bottom_li_4">
               探索黑科技，小米为发烧而生！
            </div>   
        </div>  
    </div>
    <script>
        layui.use('form', function(){
            var form = layui.form;
            form.render();

            $('.submit-cart').click(function (){
                $.post(
                    '/order/add',
                    {"shippingId":$('.close_add[checked="checked"]').attr("id"),'paymentType':$('.close_data h5[checked="checked"]').attr('id')},
                    function (result){
                        console.log(result);
                        if(result.code==0){
                            mylayer.okUrl(result.msg,'/page/order/list');
                        }else{
                            mylayer.errorMsg(result.msg,'/');
                        }
                    },'json'
                )
            });
            function selectShippingList(){
                $.post(
                    '/shipping/list',
                    function (result){
                        console.log(result);
                        if(result.code==0){
                            $(result.data).each(function () {
                                var html = '';
                                html+='<div id="'+this.id+'" class="close_add">'
                                html+='    <h1>'+this.receiverName+'</h1>'
                                html+='    <h6>'+this.receiverPhone+'</h6>'
                                html+='    <h6>'+this.receiverProvince+'省 '+this.receiverCity+'市 '+this.receiverArea+'区 '+this.receiverAddress+'街道</h6>'
                                html+='    <h6>'+this.receiverAddress+'</h6>'
                                html+='    <span class="del deleteShipping">删除</span>'
                                html+='</div>'
                                $('#shippingList').prepend(html);
                            });
                        }
                    }
                    , 'json'
                )
            }

            selectShippingList();

            $(document).on('click', '.deleteShipping', function () {
                var shippingId = $(this).closest('.close_add').attr('id');

                // 发送 POST 请求删除地址
                $.post(
                    '/shipping/delete',
                    { id: shippingId },
                    function (result) {
                        console.log(result);
                        if (result.code == 0) {
                            // 删除成功后，移除对应的 DOM 元素
                            $(this).closest('.close_add').remove();
                            mylayer.okUrl(result.msg, '/page/order/list');
                        } else {
                            mylayer.errorMsg(result.msg, '/');
                        }
                    },
                    'json'
                );
            });

            $.post(
                '/cart/list',
                function (result) {
                    console.log(result);
                    if (result.code==0){
                        $(result.data).each(function (){
                            var html='' ;
                            html+='<p>';
                            html+='    <img width="30px" height="30px" src="'+this.mainImage+'"><a href="/page/product/detail?id='+this.productId+'">'+this.productName+'  </a>'+this.productPrice+'元 x '+this.quantity+'';
                            html+='        <span >'+(this.productPrice*this.quantity)+'元</span>';
                            html+='</p>';
                            $('#cartList').append(html);
                        });
                    }
                }
                ,'json'
            )

            $('#deleteShipping').click()

            $('.close_add1').click(function(){
                layer.open({
                    area:['900px'],
                    title: '填写新地址',
                    content:
                        '   <form class="layui-form  layui-col-space10" action="">\n' +
                        '        <div class="layui-form-item  layui-col-space10">\n' +
                        '            <div class="layui-col-md6">\n' +
                        '                <input type="text" name="receiverName" required  lay-verify="required" placeholder="姓名" autocomplete="off" class="layui-input">\n' +
                        '            </div>\n' +
                        '            <div class="layui-col-md6">\n' +
                        '                <input type="text" name="receiverPhone" required lay-verify="required" placeholder="手机号" autocomplete="off" class="layui-input">\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '        <div class="layui-form-item  layui-col-space10">\n' +
                        '            <div class="layui-col-md4" >\n' +
                        '                <select name="receiverProvince" id="provinceId" style="display: block;" lay-filter="city">' +
                        '                   <option value="">请选择你的省</option>' +
                        // '                   <option value="1">北京</option>   ' +
                        // '                   <option value="2">上海</option>   ' +
                        // '                   <option value="3">广州</option>   ' +
                        // '                   <option value="4">深圳</option>   ' +
                        // '                   <option value="5">安徽</option>   ' +
                        '                </select>' +
                        '            </div>\n' +
                        '            <div class="layui-col-md4" >\n' +
                        '                <select name="receiverCity" id="cityId" style="display: block;" lay-filter="city">' +
                        '                   <option value="">请选择你的城市</option>' +
                        // '                   <option value="1">合肥</option>   ' +
                        // '                   <option value="2">北京</option>   ' +
                        // '                   <option value="3">上海</option>   ' +
                        // '                   <option value="4">深圳</option>   ' +
                        '                </select>' +
                        '            </div>\n' +
                        '            <div class="layui-col-md4" >\n' +
                        '                <select name="receiverArea" id="areaId" style="display: block;" lay-filter="city">' +
                        '                   <option value="">请选择你的区</option>' +
                        // '                   <option value="1">蜀山</option>   ' +
                        // '                   <option value="2">肥东</option>   ' +
                        // '                   <option value="3">肥西</option>   ' +
                        // '                   <option value="4">政务区</option>   ' +
                        '                </select>' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '        <div class="layui-col-md12">\n' +
                        '            <div class="layui-col-md12">\n' +
                        '                <textarea name="receiverAddress" placeholder="详细地址" class="layui-textarea"></textarea>\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '        <div class="layui-form-item  layui-col-space10">\n' +
                        '            <div class="layui-col-md6">\n' +
                        '                <input type="text" name="receiverZip" required lay-verify="required" placeholder="邮政编码" autocomplete="off" class="layui-input">\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '		<button type="button" lay-submit lay-filter="submitLogin">添加</button>\n' +
                        '    </form>',
                    success:function (layero,index){
                        $.post(
                            '/shipping/selectProvince',
                            function (result){
                                console.log(result);
                                if(result.code==0){
                                    $(result.data).each(function (){
                                        $('#provinceId').append('<option id="'+this.id+'" value="'+this.name+'">'+this.name+'</option>')
                                    })
                                }
                            },'json'
                        )

                        $('#provinceId').change(function (){
                            $.post(
                                '/shipping/selectCity',
                                {'provinceId':$('#provinceId option:selected').attr('id')},
                                function (result){
                                    console.log(result);
                                    if(result.code==0){
                                        $('#cityId option:not(:first)').remove();
                                        $(result.data).each(function (){
                                            $('#cityId').append('<option id="'+this.id+'" value="'+this.name+'">'+this.name+'</option>')
                                        })
                                    }
                                },'json'
                            )
                        })

                        $('#cityId').change(function () {
                            //this  js dom
                            $.post(
                                '/shipping/selectArea',
                                {'cityId': $('#cityId option:selected').attr('id')},
                                function (result) {
                                    console.log(result);
                                    if (result.code == 0) {
                                        //清除掉原来的数据
                                        //$('#cityId option:gt(0)').remove();
                                        $('#areaId option:not(:first)').remove();
                                        $(result.data).each(function () {
                                            $('#areaId').append('<option id="'+this.id+'" value="'+this.name+'">'+this.name+'</option>');
                                        })
                                    }
                                },
                                'json'
                            )
                        });

                        form.on('submit(submitLogin)',function (data){
                            var field = data.field;
                            $.post(
                                '/shipping/add',
                                field,
                                function (result){
                                    if(result.code==0){
                                        mylayer.okMsg(result.msg);
                                        selectShippingList();
                                        layer.close(index);
                                    }else{
                                        mylayer.errorMsg(result.msg)
                                    }
                                }
                            );
                            return false;
                        })
                    }
                });
            })
        });
        //弹窗



    </script>
</body>
</html>